<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/babel.min.js"></script>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>



    <script type="text/babel">
        class App extends React.Component {
            bookInfo = {
                wuxia: {
                    typeName: "武侠",
                    bookList: [
                        {
                            bookName: "天龙八部",
                            author: "金庸"
                        }, {
                            bookName: "水浒传",
                            author: "施耐庵"
                        }
                    ]
                },
                xuanhuan: {
                    typeName: "玄幻",
                    bookList: [
                        {
                            bookName: "霸道总裁爱上我",
                            author: "愤怒的香蕉"
                        }, {
                            bookName: "庆余年",
                            author: "猫腻"
                        }
                    ]
                }
            }
            render() {
                const { wuxia, xuanhuan } = this.bookInfo
                return (
                    <>
                        <Book aa={wuxia}/>
                        <hr />
                        <Book aa={xuanhuan} />
                    </>
                )
            }
        }
        class Book extends React.Component {
            render() {
                console.log(this.props)
                const {typeName, bookList} = this.props.aa

                return (
                    <div>
                        <h2>{typeName}</h2>
                        {
                            bookList.map(function (item, index) {
                                return (
                                    <p key={index}>
                                        <span>书名：{item.bookName},</span>
                                        <span>作者：{item.author}</span>
                                    </p>
                                )
                            })
                        }
                    </div>
                )
            }
        }

        const root = ReactDOM.createRoot(document.querySelector('#root'))
        root.render(<App />)

        /*
        1.将bookInfo的wuxia，xuanhuan数据解构赋值给wuxia，xuanhuan
        2.在Book虚拟dom中渲染wuxia和xuanhuan
        3.在App虚拟dom中通过aa参数传递数据给Book虚拟dom
        4.当传入的属性是wuxia时，Book虚拟dom就渲染wuxia的数据。当传入属性是xuanhuan时，Book虚拟dom就渲染xuanhuan的数据
        */ 
    </script>
</body>

</html>